<template>
	<div class="login">
		<div class="login_tit">
			<h3>用户登录</h3>
		</div>
		<form name="myForm" submit="signIn()">
			<div class="formbox">
				<ion-item>
					<ion-label>用户名</ion-label>
					<ion-input placeholder="请输入用户名" :value="loginName" @ionBlur="modifyLoginName"></ion-input>
				</ion-item>
				<ion-item lines="none">
					<ion-label>密码</ion-label>
					<ion-input  placeholder="请输入密码" :value="password" type="password" @ionBlur="modifyPassword"></ion-input>
				</ion-item>
			</div>
			<ion-button color="primary" shape="round" expand="full" @click="toLogin">登录</ion-button>
		</form>
	</div>
</template>

<script>
// @ is an alias to /src

import { login } from "@/api/vanProducts";
import baseUtil from "@/utils/baseUtil";
import store from '@/store'
export default {
  name: "login",
  components: {},
  data() {
    return {
      loginName: "",
      password: ""
    };
  },
  methods: {
    async toLogin() {
      if (baseUtil.isBlank(this.loginName))
        this.presentToast("请输入 账号", "warning");
      if (baseUtil.isBlank(this.password))
        this.presentToast("请输入 密码", "warning");

      let param = { loginName: this.loginName, password: this.password };
      let resp = await login(param);
      console.log("toLogin-resp:", resp);
      if (baseUtil.isNotBlankObjs(resp)) {
        if (resp.code == 0) {
          store.getters.token = resp.data.token;
		  baseUtil.setStore("token", resp.data.token);
		  this.$router.push({name:'home'});
        } else {
          this.presentToast(resp.warnMessage, "warning");
        }
      }
    },
    //修改登录名
    modifyLoginName(e) {
      this.loginName = e.target.value;
    },
    //修改登陆密码
    modifyPassword(e) {
      this.password = e.target.value;
    },
    //弹出警告 提示等信息
    //color:"primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark"
    async presentToast(msg, color) {
      color = color == null || color == "" ? "success" : color;
      const toast = await this.$ionic.toastController.create({
        message: msg,
        duration: 2000,
        color: color,
        position: "top"
      });
      toast.present();
    }
  },
   mounted() {
    
  }

};
</script>

<style>
.login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../assets/images/loginbg.jpg) no-repeat center top;
  background-size: 100% auto;
  display:block !important;
}
.login .ios {
  --background: #fff;
}
.login .login_tit {
  text-align: center;
  margin: 30% auto 0 auto;
}
.login .login_tit h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}
.login .formbox {
  height: auto;
  overflow: hidden;
  background: #fff;
  border-radius: 0.4rem;
  margin: 10% 1.5rem 10% 1.5rem;
}
.login ion-item {
  --ion-item-border-color: #eeeeee;
}
.login ion-label {
  width: 4rem;
  font-size: 0.8rem;
  color: #999;
}
.login ion-button {
  margin: 0 1.5rem;
}
</style>
